<template>
	<view>
		<view class="priceTrendPart-row2">
			<view class="priceTrendPart-title">近期价格趋势</view>
			<view class="priceTrendPart-comprehensiveFilter" @click="showComprehensiveSelect">
				{{curComprehensiveType.label}}
				<u-icon class="timeBtn-arrowDown" name="arrow-down-fill" color="#4EAAE6" size="19"></u-icon>
			</view>
		</view>
		<view class="chooseTime">
			<chooseTime ref="chooseTimeRef" @curTimeChange="curTimeChange"></chooseTime>
		</view>
		<view class="chart">
			<au-chartKLine :chartKLineData="recentPriceTrendData"></au-chartKLine>
		</view>
		<view class="compareViewContainer">
			<view class="compareView">
				<!-- 同社会对比 -->
				<view class="societyCompare">
					<!-- 同社会对比_选择框-->
					<view class="societyCompare-selectBoxContainer" @click="societyCompareClick">
						<u-icon v-if="isSocietyCompareSelected" class="societyCompare-selectBox"
							name="check-circle-outline" custom-prefix="ym-custom" color="#4EAAE6" size="28"></u-icon>
						<u-icon v-else class="societyCompare-selectBox" name="checkbox-blank-circle-outline"
							custom-prefix="ym-custom" color="#4EAAE6" size="28"></u-icon>
						同社会对比
					</view>
					<!-- 同社会对比_港口选择-->
					<view class="societyCompare-choosePort">
						<choosePortComponent ref="choosePort" @changePort="changePort"></choosePortComponent>
					</view>
				</view>
				<!-- 同询价对比 -->
				<view class="inquiryComparison" @click="inquiryCompareClick">
					<view class="societyCompare-selectBoxContainer">
						<u-icon v-if="isInquiryComparisonSelected" class="societyCompare-selectBox"
							name="check-circle-outline" custom-prefix="ym-custom" color="#4EAAE6" size="28"></u-icon>
						<u-icon v-else class="societyCompare-selectBox" name="checkbox-blank-circle-outline"
							custom-prefix="ym-custom" color="#4EAAE6" size="28"></u-icon>
						同询价对比
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="toViewDetail">查看明细</view> -->

		<!-- 综合、最高、最低弹框 -->
		<view>
			<u-select v-model="isComprehensiveFilterShow" :list="comprehensiveFilterList" cancel-color="#CECECE"
				confirm-color="#4EAAE6" @confirm="comprehensiveFilterConfirm"></u-select>
		</view>
	</view>
</template>

<script>
	import chooseTime from './chooseTime.vue'
	import choosePortComponent from './choosePortComponent.vue'
	export default {
		name: "recentPriceTrend",
		components: {
			choosePortComponent,
			chooseTime,
		},
		props: {
			curMaterial: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				//综合、最高、最低选择框是否显示
				isComprehensiveFilterShow: false,
				comprehensiveFilterList: [{
					value: 0,
					label: '综合'
				}, {
					value: 1,
					label: '最低'
				}, {
					value: 2,
					label: '最高'
				}],
				//当前选中数据类型
				curComprehensiveType: {},
				//是否选中同社会对比
				isSocietyCompareSelected: false,
				//是否选中同询价对比
				isInquiryComparisonSelected: false,
				//近期价格趋势图数据
				recentPriceTrendData: {}
			};
		},
		created() {
			this.curComprehensiveType = this.comprehensiveFilterList[0];
		},
		watch: {
			curMaterial() {
				this.requstPriceLineAndChart();
			}
		},
		methods: {
			//请求近期价格趋势图
			requstPriceLineAndChart() {
				this.$nextTick(function() {
					if (this.$refs.choosePort.curPort.pkid && this.curMaterial.baseMaterialPkid) {
						let data = {
							baseMaterialId: this.curMaterial.baseMaterialPkid,
							portId: this.$refs.choosePort.curPort.pkid,
							dateType: this.$refs.chooseTimeRef.curTimeType,
							dataType: this.curComprehensiveType.value,
							time: this.$refs.chooseTimeRef.selectedTime,
							society: this.isSocietyCompareSelected,
							inquire: this.isInquiryComparisonSelected
						};
						this.$u.api.requstPriceLineAndChart(data).then(res => {
							let dateTimeList = []; //横坐标所有的时间
							let orderPriceList = []; //企业物料订单值数据
							let societyCompareList = []; //同社会对比list
							let inquiryComparisonList = []; //询价对比list
							for (let item of res) {
								dateTimeList.push(item.dateTime);
								//处理企业物料订单值数据
								orderPriceList.push(item.orderPrice);
								//处理同社会对比的数据列表
								let societyCompareItem = [item.societyStar, item.societyEnd, item
									.societyMin, item.societyMax
								];
								societyCompareList.push(societyCompareItem);
								// 处理询价对比数据列表
								inquiryComparisonList.push(item.inquirePrice);
							}
							//整合数据
							let yAxisDataList = []; //y轴数据列表
							//整合数据_企业物料订单
							let orderPriceListMap = {
								name: '企业物料订单',
								type: 1, //0代表k线图，1代表折线图
								color: 'yellow',
								data: orderPriceList,
							}
							yAxisDataList.push(orderPriceListMap);
							//整合数据_社会物料
							let societyCompareMap = {
								name: '社会物料',
								type: 0, //0代表k线图，1代表折线图
								data: this.isSocietyCompareSelected ? societyCompareList : [],
							}
							yAxisDataList.push(societyCompareMap);
							//整合数据_询价物料
							let inquiryComparisonMap = {
								name: '询价物料',
								type: 1, //0代表k线图，1代表折线图
								color: 'blue',
								data: this.isInquiryComparisonSelected ? inquiryComparisonList : []
							}
							yAxisDataList.push(inquiryComparisonMap);
							this.recentPriceTrendData = {
								xAxisDataList: dateTimeList, //x轴数据
								yAxisDataList: yAxisDataList, //y轴数据
							}
						}).catch(err => {
							console.error(err)
						})
					}
				})
			},

			//显示综合、最高、最低弹框
			showComprehensiveSelect() {
				this.isComprehensiveFilterShow = true;
			},
			//切换综合、最高、最低筛选项
			comprehensiveFilterConfirm(e) {
				this.curComprehensiveType = e[0];
				this.requstPriceLineAndChart();
			},

			//同社会对比选择框的点击事件
			societyCompareClick() {
				this.isSocietyCompareSelected = !this.isSocietyCompareSelected;
				this.requstPriceLineAndChart();
			},

			//同询价对比选择框的点击事件
			inquiryCompareClick() {
				this.isInquiryComparisonSelected = !this.isInquiryComparisonSelected;
				this.requstPriceLineAndChart();
			},

			//切换港口
			changePort(newPort) {
				this.requstPriceLineAndChart();
			},

			//当前时间改变的回调
			curTimeChange() {
				this.requstPriceLineAndChart();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.priceTrendPart-row2 {
		width: 100%;
		height: 50rpx;
	}

	.priceTrendPart-title {
		float: left;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}

	.priceTrendPart-comprehensiveFilter {
		width: 200rpx;
		height: 50rpx;
		border: 1rpx solid #4EAAE6;
		border-radius: 10rpx;
		float: right;
		text-align: center;
		padding: 0rpx 25rpx;
		font-size: 29rpx;
		color: #333333;
	}

	.timeBtn-arrowDown {
		float: right;
		margin-left: 10rpx;
		margin-top: 15rpx;
	}

	.chooseTime {
		margin-top: 30rpx;
	}

	.chart {
		margin: 20rpx 10rpx 0rpx 10rpx;
	}

	.compareViewContainer {
		text-align: center;
	}

	.compareView {
		display: inline-block;
		height: 80rpx;
	}

	.societyCompare {

	}

	.societyCompare-selectBoxContainer {
		display: inline-block;
		vertical-align: middle;
		font-size: 24rpx;
		color: #333333;
	}

	.societyCompare-selectBox {
		margin-right: 10rpx;
	}

	.societyCompare-choosePort {
		display: inline-block;
		vertical-align: middle;
		height: 40rpx;
		border: 1rpx solid #D2D2D2;
		border-radius: 10rpx;
		margin: 0rpx 10rpx;
		padding: 0rpx 25rpx;
	}
	
	.inquiryComparison {
		text-align: left;
	}

	.toViewDetail {
		width: 200rpx;
		height: 50rpx;
		line-height: 50rpx;
		background: linear-gradient(90deg, #4EAAE6 0%, #0672BF 100%);
		border-radius: 10rpx;
		text-align: center;
		margin: 0 auto;
		font-size: 22rpx;
		color: #FFFFFF;
	}
</style>
